<template>
    <div>
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="审批人">
                <el-input placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">查询</el-button>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="personCol"
                    >自定义列</el-button
                >
            </el-form-item>
        </el-form>
        <div class="table">
            <el-table
                :data="tableData"
                :header-cell-style="{ background: '#F8FAFB' }"
                border
                style="width: 100%"
            >
                <el-table-column
                    v-for="(item, index) in tableCols"
                    :key="index"
                    v-if="item.state"
                    :prop="item.prop"
                    :label="item.label"
                >
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
            >
            </el-pagination>
        </div>

        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="600px"
            :before-close="handleClose"
        >
            <div class="dialog-content">
                <div class="left">
                    <h5>账户属性</h5>

                    <!-- <el-checkbox-group 
                        v-model="checkedCities"
                        >
                        <el-checkbox 
                            v-for="(item, index) in checkedCities" 
                            :label="item.prop" :key="index"
                            :checked='item.state'
                            >
                            {{item.label}}
                        </el-checkbox>
                    </el-checkbox-group> -->

                    <el-checkbox
                        v-for="(item, index) in tableCols"
                        :label="item.prop"
                        :key="index"
                        v-model="item.state"
                        @change="handleCheckedCitiesChange"
                    >
                        {{ item.label }}
                    </el-checkbox>
                </div>
                <div class="right">
                    <h5>已选指标</h5>
                    <div
                        class="have-select"
                        v-for="(item, index) in tableCols"
                        :key="index"
                        v-if="item.state"
                    >
                        <div class="name">{{ item.label }}</div>
                        <img
                            src=""
                            class="close"
                            alt=""
                            @click="delCols(item, index)"
                        />
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'nuxt-property-decorator';

@Component
export default class Common extends Vue {
    page: number = 1;
    dialogVisible = false;
    checkedCities: any = [];
    cities = ['上海', '北京', '广州', '深圳'];

    // 自定义列
    tableCols = [
        {
            prop: 'date',
            label: '日期',
            state: true
        },
        {
            prop: 'name',
            label: '姓名',
            state: true
        },
        {
            prop: 'age',
            label: '年龄',
            state: true
        },
        {
            prop: 'email',
            label: '邮箱',
            state: false
        }
    ];
    tableData = [
        {
            date: '2018',
            name: '姓名',
            age: 18,
            email: '@78'
        },
        {
            date: '2018',
            name: '姓名',
            age: 18,
            email: '@78'
        },
        {
            date: '2018',
            name: '姓名',
            age: 18,
            email: '@78'
        }
    ];

    mounted() {
        this.$point({
            id: 'good'
        });
    }

    public handleCheckedCitiesChange(val: any) {
        console.log(val);
    }
    // 删除已选择
    public delCols(item: any, index: any) {
        item.state = false;
        this.tableCols.splice(index, 1);
    }

    public personCol() {
        // for(let i = 0; i < this.tableCols.length; i++) {
        //     let item = this.tableCols[i];
        //     if (!this.tableCols[i].state) {
        //         this.checkedCities.push(item);
        //     }
        // }

        this.dialogVisible = true;
    }

    public handleSizeChange(val: number) {
        console.log(`每页 ${val} 条`);
    }

    public handleCurrentChange(val: number) {
        console.log(`当前页: ${val}`);
    }

    public handleClose() {}
}
</script>

<style lang="less">
.table {
    margin-bottom: 16px;
}

.el-pagination {
    display: flex;
    justify-content: center;
}

.el-dialog__body {
    padding: 0;
}

.dialog-content {
    display: flex;
    justify-content: space-between;
    // padding: 16px 17px;
    border-top: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    h5 {
        padding: 0;
        margin: 0;
        font-weight: bold;
        font-size: 16px;
        color: #252631;
        margin-bottom: 24px;
    }

    .left {
        padding: 16px 17px;
    }

    .right {
        background: #f5f7fa;
        width: 200px;
        padding: 16px;
    }

    .have-select {
        padding: 10px;
        background-color: #fff;
        font-size: 12px;
        color: #606266;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 4px;
    }

    .name {
        &::before {
            content: '';
            width: 10px;
            height: 9px;
            // background: url('~assets/img/sx.png') no-repeat;
            background-size: 100%;
            display: inline-block;
            margin-right: 3px;
        }
    }

    .close {
        width: 8px;
        height: 8px;
        display: block;
    }
}
</style>
